<template>
  <div class="screen-block">
    <div class="list">
      <border-box10 v-for="item in option" :key="item">
        <div class="list-con">
          <p class="title">{{ item.name }}</p>
          <p class="value">{{ item.value }}</p>
        </div>
      </border-box10>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BorderBox10 } from '@kjgl77/datav-vue3';
const option = ref([
  { name: '收费系统', value: 93 },
  { name: '通信系统', value: 32 },
  { name: '监控系统', value: 65 },
  { name: '供配电系统', value: 44 },
  { name: '其他', value: 52 },
  { name: '监控系统1', value: 65 },
  { name: '供配电系统1', value: 44 },
  { name: '其他1', value: 52 },
]);
</script>

<style lang="scss" scoped>
.screen-block {
  width: 100%;
  height: 100%;
  .list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 23% 23% 23% 23%;
    grid-template-rows: repeat(2, 48%);
    .list-con {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
